<template>
  <!--课程展示页-->
  <div>
    <div style="margin:auto;display: flex;background-color: white">
      <!--内容第一栏-->
      <div class="course-d1">
        <!--面包屑，存有首页、课程大类、课程分类的路由地址，点击进行跳转-->
        <p style="width: 1200px;margin: 20px 0 15px 10px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/courseTypeView/'+ course.fathertypeId}">{{ course.fathertypeName }}
            </el-breadcrumb-item>
            <el-breadcrumb-item
                :to="{ path: '/courseTypeView/courseListView/'+ course.fathertypeId+'/'+course.coursetypeId}">
              {{ course.coursetypeName }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ course.courseName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </p>
        <div style="display: flex;">
          <img :src="`http://localhost:8089/upload/${course.cover}`"
               style="width: 510px;height: 288px;border-radius: 18px;"/>
          <div>
            <div style="width: 700px;">
              <a style="font-weight: bold;font-size:24px;margin:0 0 0 30px">{{ course.courseName }}</a>
<!--              <a style="float: right;margin-right: 15px">xxxx</a>-->
            </div>
            <div
                style="display:flex;flex-direction: column;width: 700px;height: 132px;margin:20px 0 0 30px;border-radius: 18px;background-color: #F8F9FB">
              <div style="margin:30px 0 0 20px;color: #999999">创建时间：{{ course.createTime|formatDate('yyyy年MM月dd日') }}</div>
              <div style="margin:10px 0 0 20px;color: #999999">最近更新：{{ course.updateTime|formatDate('yyyy年MM月dd日') }}</div>
              <div style="margin: 20px 20px 0;text-align:right;color: #999999;font-size: 14px">
                已有{{ course.attendNum }}人参加
              </div>
            </div>
            <!--          未参与课程用户的按钮，点击参与课程-->
            <el-button v-if="!attendFlag" type="primary" @click="on_AddAttendCourse"
                       style="margin:20px 0 0 30px;border-radius: 24px;font-size: 18px;width: 192px;height: 48px">立即参加
            </el-button>
            <!--          已参与课程用户的按钮，点击进入课程学习页-->
            <el-button v-else type="primary" @click="inLearn"
                       style="margin:20px 0 0 30px;border-radius: 24px;font-size: 18px;width: 192px;height: 48px">
              已参加，进入学习
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!--    第二个内容栏-->
    <div style="margin:auto;width: 1200px;">
      <div style="display: flex;margin: 20px 0">
        <!--      课程信息的标签页-->
        <el-tabs class="course-tabs" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="课程详细" name="first">
            <div v-if="course.synopsis">
              <p class="course-p">课程概述</p>
              <el-input type="textarea" :autosize="{ minRows: 2}" v-model="course.synopsis" readonly="true"></el-input>
            </div>
            <div v-if="course.prerequisites">
              <p class="course-p">预备知识</p>
              <el-input type="textarea" :autosize="{ minRows: 2}" v-model="course.prerequisites" readonly="true"></el-input>
            </div>
            <div v-if="course.reference">
              <p class="course-p">参考资料</p>
              <el-input type="textarea" :autosize="{ minRows: 2}" v-model="course.reference" readonly="true"></el-input>
            </div>
          </el-tab-pane>
          <el-tab-pane label="课程评价" name="second">
            <div v-if="appraiseList.length!==0" style="display: flex;width: 350px;height: 70px;margin-top: 20px">
              <a style="font-size: 45px;color: #ff9900">{{ parseFloat(course.score).toFixed(2) }}</a>
              <div style="margin: 7px 0 0 10px">
                <el-rate
                    v-model="course.score"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="">
                </el-rate>
                <p style="margin:10px 0 0 10px;font-size:12px;color: #999999">共{{ appraiseList.length }}条评价</p>
              </div>
            </div>
            <el-empty v-else description="这门课程还没有评价，快去评价吧"></el-empty>
            <div style="display: flex;margin-top: 20px" v-for="(item,index) in appraiseList" :key="index"
                 :offset="index > 0 ? 2 : 0">
              <img :src="`http://localhost:8089/upload/${item.avatar}`"
                   style="border-radius: 50%;width: 40px;height: 40px">
              <el-col style="margin-left:20px;">
                <div style="display:flex;margin: 0 0;font-size: 15px;color: #333354;">
                  <a>{{ item.userName }}</a>
                  <div style="margin-left: 10px">
                    <el-rate
                        class="rete"
                        v-model="item.score"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="">
                    </el-rate>
                  </div>
                </div>
                <p style="margin:5px 0;width:760px;font-size:17px;color:#666666;">
                  {{ item.comment }}
                </p>
                <p style="margin:0;font-size: 15px;color: #999999">
                  发表于{{ item.createTime|formatDate('yyyy-MM-dd HH:mm:ss')}}
                </p>
              </el-col>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div style="display: flex;flex-direction: column;">
          <div
              style="width: 295px;margin-left:20px;padding-top: 20px;height:300px;background-color:white;border-radius: 12px;">
            <div style="width: 235px;height: 103px;margin: 0 30px;">
              <img :src="`http://localhost:8089/upload/${course.brand}`" style="width: 200px;margin:10px 0 0 15px"/>
              <el-divider></el-divider>
            </div>
            <div style="display: flex;padding:20px 0 0 20px;">
              <div style="width:8px;height:28px;background-color: #409EFF;"></div>
              <a style="margin-left: 20px;font-size: 20px">授课老师</a>
            </div>
            <div @click="onTeacher(course.userId)" style="display: flex;margin: 10px 20px;cursor:pointer">
              <img :src="`http://localhost:8089/upload/${course.avatar}`" style="width: 60px;border-radius:50%;margin:10px 0 0 15px"/>
              <div style="margin: 10px 20px">
              <a @click="" style="font-size: 24px;margin: 0">
                {{ course.userName }}
              </a>
                <p style="margin: 0">
                <a v-if="course.identitytypeId===1">学生</a>
                <a v-else-if="course.identitytypeId===2">在职</a>
                <a v-else>其他</a>
                </p>
              </div>
            </div>
          </div>
          <div
              style="width: 295px;margin-left:20px;height:500px;background-color:white;border-radius: 12px;margin-top:20px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CourseView",
  data() {
    return {
      courseId: '',
      attendFlag: false,
      activeName: 'first',
      course: {},
      appraiseList: []
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 使用课程Id查询本页面课程的信息
    getCourseById(courseId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/selectCourseById/${courseId}`
      }).then(res => {
        this.course = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 课程Id查询关于本课程的评价
    getAppraiseListByCourseId(courseId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/appraise/selectAppraiseByCourseId/${courseId}`
      }).then(res => {
        this.appraiseList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 点击参与课程后进行用户参与课程情况的存储
    on_AddAttendCourse() {
      this.$axios({
        method: 'post',
        url: "http://localhost:8089/user/attendCourse/createAttendCourse",
        data: {"userId": localStorage.getItem('userId'), "courseId": this.courseId}
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg);
          setTimeout(() =>
                  this.addAttendNum(this.courseId)
              , 300)
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(err => console.log(err));
    },
    // 查询用户是否参与该课程
    getIfAttend(courseId) {
      this.$axios({
        method: 'post',
        url: "http://localhost:8089/user/attendCourse/selectAttendCourse",
        data: {"userId": localStorage.getItem('userId'), "courseId": courseId}
      }).then(res => {
        if (res.data.code === 200) {
          this.attendFlag = true;
        } else {
          this.attendFlag = false;
        }
      }).catch(err => console.log(err));
    },
    // 判断用户是否参与课程，若已参与则跳转到课程学习页
    inLearn() {
      this.$axios({
        method: 'post',
        url: "http://localhost:8089/user/attendCourse/selectAttendCourse",
        data: {"userId": localStorage.getItem('userId'), "courseId": this.courseId}
      }).then(res => {
        this.$router.push({path: '/learn/announce/' + this.courseId});
      }).catch(err => console.log(err));
    },
    // 查询参与本课程的人数
    addAttendNum(courseId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/addAttendNum/${courseId}`
      }).then(res => {
        if (res.data.code === 200) {
          setTimeout(() =>
                  this.$router.go(0)
              , 300)
        }
      }).catch(err => console.log(err));
    },
    onTeacher(userId){
      this.$router.push({path:"/userHome/"+userId})
    }
  },
  filters:{
    formatDate: function(value,args) {
      var dt = new Date(value);
      if(args == 'yyyy年MM月dd日') {// yyyy年MM月dd日
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2,'0');
        let date = dt.getDate().toString().padStart(2,'0');
        return `${year}年${month}月${date}日`;
      } else if(args == 'yyyy-MM-dd HH:mm:ss'){// yyyy-MM-dd HH:mm:ss
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2,'0');
        let date = dt.getDate().toString().padStart(2,'0');
        let hour = dt.getHours().toString().padStart(2,'0');
        let minute = dt.getMinutes().toString().padStart(2,'0');
        let second = dt.getSeconds().toString().padStart(2,'0');
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
      }
    }
  },
  created() {
    this.courseId = this.$route.params.courseId;
    // 若用户已登录则查询用户是否参与该课程
    if (localStorage.getItem('userId') != null)
      this.getIfAttend(this.courseId)
    this.getCourseById(this.courseId);
    this.getAppraiseListByCourseId(this.courseId);
  },

}
</script>

<style scoped>
@import "../css/course.css";
/deep/.el-textarea__inner{
  border: none;
}

/deep/ .el-tabs__item {
  font-size: 18px !important;
}

/deep/ .el-rate__icon {
  font-size: 30px;
}

.rete /deep/ .el-rate__icon {
  font-size: 20px;
  margin-right: 0;
}
</style>